<template>
  <div class="Train">
    <div class="top_box">
      <div
        class="top_item"
        :class="activceIndex == 0 ? 'activeImg' : ''"
        @click="changeItem(0)"
      >
        <img src="@/assets/home/plain.svg" alt="" />
        &nbsp;&nbsp;&nbsp;场景名称
      </div>
      <div
        class="top_item"
        :class="activceIndex == 1 ? 'activeImg' : ''"
        @click="changeItem(1)"
      >
        <img src="@/assets/home/plain.svg" alt="" />
        &nbsp;&nbsp;&nbsp;场景名称
      </div>
      <div
        class="top_item"
        :class="activceIndex == 2 ? 'activeImg' : ''"
        @click="changeItem(2)"
      >
        <img src="@/assets/home/plain.svg" alt="" />
        &nbsp;&nbsp;&nbsp;场景名称
      </div>
    </div>
    <div class="content">
      <div class="stageList">
        <div class="stateItem1">场景信息</div>
        <div v-for="(_, index) in 15" :key="index">
          <div class="stateItem1">阶段:xxxx</div>
        </div>
      </div>
      <div class="eventList">
        <div
          v-for="(_, index) in 8"
          :key="index"
          class="eventItem"
          @click="getEventDetail"
        >
          <div class="eventItem1">
            <img src="../../assets/train/eventIcon.svg" />
            <div>事件卡名称</div>
            <div>
              <img
                src="../../assets/train/aclock.svg"
                style="vertical-align: middle"
              />
              &nbsp; 5min
            </div>
          </div>
          <div class="eventItem2">
            <div>主题：xxxx</div>
            <div class="eventItem2-title">胜任力：xxxx</div>
            <div>阶段：xxxxx</div>
          </div>
        </div>
      </div>
      <div class="trainDetail">
        <div v-if="!isDetail">
          <SceneInfo />
        </div>
        <div v-else>
          <EventInfo />
        </div>
        <div class="btnUnion">
          <div class="custom-valueButton" @click="gotoAssess">TEM评估</div>
          <div class="custom-valueButton" @click="gotoAssess">胜任力评估</div>
          <div class="custom-valueButton" @click="gotoAssess">跳过此事件</div>
          <div class="custom-valueButton" @click="submitAccess">提交评估</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import EventInfo from './components/eventInfo.vue';
import SceneInfo from './components/sceneInfo.vue';
import { useRouter } from 'vue-router';
const activceIndex = ref(0);
const isDetail = ref(false);
const router = useRouter();
const changeItem = (index: number): void => {
  activceIndex.value = index;
  isDetail.value = false;
};
const getEventDetail = (): void => {
  isDetail.value = true;
};
const gotoAssess = (): void => {};
const submitAccess = (): void => {
  console.log('提交评估');
  router.push({
    path: '/accessPage',
    query: {
      title: '2025年737上半年模拟机定期复训B-737',
    },
  });
};
</script>

<style scoped lang="less">
.Train {
  font-size: 20px;
  width: 100%;
  font-weight: bold;
  color: #fff;
  .top_box {
    display: flex;
    justify-content: space-between;
    .top_item {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32%;
      height: 100px;
      font-size: 20px;
      background: #273368;
      img {
        height: 40px;
      }
    }
    .activeImg {
      background: url('@/assets/home/activeBackground.svg') no-repeat;
      background-size: cover;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    .stageList {
      width: 9%;
      height: 670px;
      overflow-y: auto;
      background-color: #131d44;
      font-size: 14px;
      .stateItem1 {
        width: 100px;
        margin: 20px auto;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 2px solid #8d92a5;
        border-radius: 5px;
      }
    }
    .eventList {
      width: 21%;
      height: 670px;
      overflow-y: auto;
      padding: 0 5px;
      .eventItem {
        width: 100%;
        height: 180px;
        border-radius: 5px;
        margin-bottom: 20px;
        .eventItem1 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #283469;
          font-size: 16px;
          height: 50px;
          padding: 0 10px;
        }
        .eventItem2 {
          margin: 0 !important;
          font-size: 16px;
          height: 120px;
          background-color: #131d44;
          list-style-type: disc !important;
          padding-top: 10px;
          padding-left: 20px;
          color: #6d7285;
          div {
            margin: 0 !important;
          }
          .eventItem2-title {
            margin: 15px 0 !important;
          }
        }
      }
    }
    .trainDetail {
      width: 68%;
      height: 600px;
      background-color: #131d44;
      .btnUnion {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 0;
        width: 68%;
        z-index: 999;
        height: 100px;
        background-color: #262836;
        .custom-valueButton {
          width: 180px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: #fff;
          border-radius: 10px;
          cursor: pointer;
          margin: 0 20px;
          background-color: #262836;
          font-size: 16px;
          border: 2px solid #6b6e78;
        }
        .custom-valueButton:hover {
          width: 180px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: #fff;
          border-radius: 10px;
          cursor: pointer;
          margin: 0 20px;
          background: url('@/assets/home/activeBackground.svg') no-repeat;
          background-size: cover;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
